{% extends 'base.html' %}
{% load static %}

{% block title %}写文章{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8 bg-white p-4">

            <h3 class="border-bottom mb-4 shadow-sm">写文章</h3>

            <form class="needs-validation" enctype="multipart/form-data" method="POST" novalidate>
                {% csrf_token %}

                <div class="invalid-feedback">
                    {% for non_field_error in form.non_field_errors %}
                    <span>{{ non_field_error }}</span>
                    {% endfor %}
                </div>

                <fieldset class="form-group">
                    {{ form.media }}
                    {% for field in form %}

                    <label for="{{ field.id_for_label }}">{{ field.label}}</label>
                    <div class="input-group mb-2">
                        {{ field }}

                        {% if field.label == '栏目' or field.label == '标签' %}
                        <div class="input-group-append">
                        <span class="input-group-text">
                            <a data-target="#{{ field.html_name }}Modal" data-toggle="modal" href="#" type="button">
                                 <img alt="添加图标" src="{% static 'img/icon-addlink.svg' %}">
                            </a>
                        </span>
                        </div>
                        {% endif %}
                        <div class="invalid-feedback">
                            {% for error in field.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    </div>

                    {% endfor %}
                </fieldset>
                <div class="form-group">
                    <button class="btn btn-outline-info" type="submit">保存</button>
                </div>
            </form>

            <!-- category Modal -->
            <div class="modal fade" id="categoryModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="categoryModalLabel">创建栏目</h5>
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form action="{% url 'blog:new_category' %}" method="POST" novalidate>
                                {% csrf_token %}

                                <div class="invalid-feedback">
                                    {% for non_field_error in category_form.non_field_errors %}
                                    <span>{{ non_field_error }}</span>
                                    {% endfor %}
                                </div>
                                <fieldset class="form-group">
                                    {% for field in category_form %}

                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    <div class="input-group mb-2">
                                        {{ field }}

                                        <div class="invalid-feedback">
                                            {% for error in field.errors %}
                                            <span>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    {% endfor %}

                                </fieldset>
                                <div class="form-group d-flex justify-content-end mt-0">
                                    <button class="btn btn-secondary mr-2" data-dismiss="modal" type="button">关闭
                                    </button>
                                    <button class="btn btn-outline-info" type="submit">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--tag modal-->
           <div class="modal fade" id="tagsModal" role="dialog" tabindex="-1">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="tagsModalLabel">创建标签</h5>
                            <button aria-label="Close" class="close" data-dismiss="modal" type="button">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form action="{% url 'blog:new_tags' %}" method="POST" novalidate>
                                {% csrf_token %}

                                <div class="invalid-feedback">
                                    {% for non_field_error in tag_form.non_field_errors %}
                                    <span>{{ non_field_error }}</span>
                                    {% endfor %}
                                </div>
                                <fieldset class="form-group">
                                    {% for field in tag_form %}

                                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    <div class="input-group mb-2">
                                        {{ field }}

                                        <div class="invalid-feedback">
                                            {% for error in field.errors %}
                                            <span>{{ error }}</span>
                                            {% endfor %}
                                        </div>
                                    </div>

                                    {% endfor %}

                                </fieldset>
                                <div class="form-group d-flex justify-content-end mt-0">
                                    <button class="btn btn-secondary mr-2" data-dismiss="modal" type="button">关闭
                                    </button>
                                    <button class="btn btn-outline-info" type="submit">提交</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}
<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();

</script>
{% endblock %}
